client import { buildData } from "./data.js";

<let/rows=[]>
<let/selected=undefined>

<div class="container">
  <div class="jumbotron">
    <div class="row">
      <div class="col-md-6">
        <h1>Marko</h1>
      </div>
      <div class="col-md-6">
        <div class="row">
          <div class="col-sm-6 smallpad">
            <button
              type="button"
              class="btn btn-primary btn-block"
              id="run"
              onClick() {
                rows = buildData(1000);
              }>
              Create 1,000 rows
            </button>
          </div>
          <div class="col-sm-6 smallpad">
            <button
              type="button"
              class="btn btn-primary btn-block"
              id="runlots"
              onClick() {
                rows = buildData(10000);
              }>
              Create 10,000 rows
            </button>
          </div>
          <div class="col-sm-6 smallpad">
            <button
              type="button"
              class="btn btn-primary btn-block"
              id="add"
              onClick() {
                rows = rows.concat(buildData(1000));
              }>
              Append 1,000 rows
            </button>
          </div>
          <div class="col-sm-6 smallpad">
            <button
              type="button"
              class="btn btn-primary btn-block"
              id="update"
              onClick() {
                let clone = rows.slice();
                for (let i = 0; i < clone.length; i += 10) {
                  const row = clone[i];
                  clone[i] = { id: row.id, label: row.label + " !!!" };
                }
                rows = clone;
              }>
              Update every 10th row
            </button>
          </div>
          <div class="col-sm-6 smallpad">
            <button
              type="button"
              class="btn btn-primary btn-block"
              id="clear"
              onClick() {
                rows = [];
              }>
              Clear
            </button>
          </div>
          <div class="col-sm-6 smallpad">
            <button
              type="button"
              class="btn btn-primary btn-block"
              onClick() {
                if (rows.length > 998) {
                  const clone = rows.slice();
                  const tmp = clone[1];
                  clone[1] = clone[998];
                  clone[998] = tmp;
                  rows = clone;
                }
              }
              id="swaprows">
              Swap Rows
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <table class="table table-hover table-striped test-data">
    <tbody>
      <for|row| of=rows by="id">
        <tr class=(selected === row.id && "danger")>
          <td class="col-md-1">
            ${row.id}
          </td>
          <td class="col-md-4">
            <a onClick() {
              selected = row.id;
            }>
              ${row.label}
            </a>
          </td>
          <td class="col-md-1">
            <a onClick() {
              const clone = rows.slice();
              clone.splice(clone.indexOf(row), 1);
              rows = clone;
            }>
              <span class="glyphicon glyphicon-remove" aria-hidden="true"/>
            </a>
          </td>
          <td class="col-md-6"/>
        </tr>
      </for>
    </tbody>
  </table>
  <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"/>
</div>
